<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" type="text/css" href="./css/bbbb.css" />
    <link rel="stylesheet" href="css/nav.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/nav-position-fixed.js"></script>
    <style>
        body {
            width: 100%;
        }

        section {
            width: 100%;
            height: auto;
            min-height: 600px;
            position: relative;
        }

        .listbox {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -400px;
            margin-top: -150px;
        }

        .itme {
            height: 300px;
            width: 202px;
            border: 1px solid #000;
            padding: 5px;
            margin: 5px;
            float: left;
            position: relative;
        }

        .itme img {
            width: 200px;
            height: 200px;
        }

        .itme p:nth-child(2) {
            margin-top: 20px;
            font-size: 14px;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }

        .itme p:nth-child(3) {
            font-size: 14px;
            color: red;

            position: absolute;
            bottom: 10px;
            left: 10px;
        }

        .title {
            overflow: hidden;
            width: 200px;
            white-space: nowrap;
            text-overflow: ellipsis
        }

        .listgood {
            font-size: 20px;
            font-weight: bold;
            text-indent: 2px;

        }
    </style>
</head>

<body>
    <header>

    </header>
    <nav></nav>
    <section>
        <div class="listbox clearFix">
            <p class="listgood">
                商品列表
            </p>
        </div>
    </section>

    <footer></footer>
</body>

</html>
<script>
    (function () {

        $(function () {
            $.ajax({
                url: "./../server/getGoods.php",
                dataType: "json"
            }).done(function (res) {
                res.forEach((el, index) => {

                    let strHtml = `
                    <a href="./shopping.html?pid=${el.pid}">
                        <div class="itme">
                          <img src="../server/${el.imgUrl}" alt="">
                          <p >${el.name}</p>
                          <p>$${el.price}</p>
                      </div>
                     </a>`;
                    $(".listbox").append(strHtml);
                });
            })

            $("header").load("./bbbb.html")
            $("nav").load("./nav.html")
            $("footer").load("./footer.html")
        })

    })()
</script>